// import React from 'react';
import { InlineMath, BlockMath } from 'react-katex';
import 'katex/dist/katex.min.css';

const MathFormulas = () => {
  return (
    <div style={{ 
      maxWidth: '800px', 
      margin: '0 auto', 
      padding: '20px',
      fontFamily: 'Arial, sans-serif'
    }}>
      <h2 style={{ 
        color: '#2c3e50', 
        borderBottom: '2px solid #3498db', 
        paddingBottom: '10px',
        marginBottom: '30px'
      }}>
        数学公式3个
      </h2>
      {/* 行内公式 */}
      <p>
        勾股定理：<InlineMath math="a^2 + b^2 = c^2" />
      </p>

      {/* 块级公式（单独成行） */}
      <p>麦克斯韦方程组之一：</p>
      <BlockMath math="\nabla \cdot \mathbf{E} = \frac{\rho}{\epsilon_0}" />

      {/* 复杂公式示例：拉普拉斯方程 */}
      <p>三维拉普拉斯方程：</p>
      <BlockMath math="\nabla^2 f = \frac{\partial^2 f}{\partial x^2} + \frac{\partial^2 f}{\partial y^2} + \frac{\partial^2 f}{\partial z^2} = 0" />
    </div>
  );
};

export default MathFormulas;
